<template>
  <div class="ten_box">
    <m-header modile-title="Vue-scope" go-back="true"></m-header>
    <tb-list :data="data">
      <!--slot插槽：接收以下的template的所有内容-->
      <template slot-scope="scope">
        <div class="info" :s="JSON.stringify(scope)">
          <p>姓名:{{scope.row.name}}</p>
          <p>年龄:{{scope.row.age}}</p>
          <p>性别:{{scope.row.sex}}</p>
          <p>索引:{{scope.$index}}</p>
        </div>
      </template>
    </tb-list>
    <div class="btn-li">
      <ul>
        <li v-for="(n,index) in button" :key="index">
          <button :class="(active === index)?'active':''" @click="btnChange(index)">{{n.text}}</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss">
  .ten_box {
    padding-top: 60px;
    background: #fff;
    width: 100%;
    flex: 1;
    height: 100%;
    .info {
      width: 100%;
      border-bottom: 1px solid #f2f2f2;
      padding: 10px;
      p {
        font-size: 20px;
      }
    }
    .btn-li {
      padding-top: 60px;
      ul {
        li {
          margin-top: 10px;
          button {
            width: 120px;
            height: 40px;
            outline: none;
            border: none;
            background: #2a5eb8;
            color: #ffffff;
          }
          .active {
            width: 120px;
            height: 40px;
            outline: none;
            border: none;
            background: #ff0000;
            color: #ffffff;
          }
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import tbList from '../../../../components/scopeList'

  export default {
    data() {
      return {
        data: [
          {name: '小猴子', age: '25', sex: '男'},
          {name: '长颈鹿', age: '22', sex: '男'},
          {name: '小海疼', age: '18', sex: '女'}
        ],
        button: [
          {text: '开始', index: 1},
          {text: '开始', index: 2},
          {text: '开始', index: 3},
          {text: '开始', index: 4},
          {text: '开始', index: 5},
        ],
        active: -1
      }
    },
    methods: {
      btnChange(index) {
        // console.log(index)
        this.active = index
      }
    },
    components: {
      mHeader,
      tbList
    }
  }
</script>
